<template>
	<view class="searchContainer">
		<view class="navBarContainer">
			<view class="navBar">
				<view class="back" @click="goBack">
					<view class="iconContainer">
						<u-icon name="arrow-left" size="20"></u-icon>
					</view>
				</view>
				<view class="searchInfo">
					<u--input
						placeholder="搜一搜你想吃的餐品"
						prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399"
						placeholderStyle="color:rgb(141,139,168)"
						customStyle="backgroundColor:rgb(245,245,245)"
						v-model="searchName"
					></u--input>
				</view>
				<view class="searchButton" @click="searchFoods">
					搜索
				</view>
			</view>
		</view>
		<view class="foodContainer">
			<view class="setmealFood" v-for="(food,index) in setmealFoods" :key="index">
				<view class="select" @click="goSelect(food.id)">
					选规格
					<div class="numWarning" v-if="food.num!=0">
						{{food.num}}
					</div>
				</view>
				<view class="foodImg" :style="[{backgroundImage:'url('+food.image+')'}]">
					
				</view>
				<view class="foodContent">
					<view class="name">
						{{food.name}}
					</view>
					<view class="type">
						{{food.description}}
					</view>
					<view class="priceContainer">
						￥<text class="price">{{food.price}}</text>起
					</view>
				</view>
			</view>
			<view class="dishFood" v-for="(food,index) in dishFoods" :key="index">
				<view class="add"
				:style="[food.num==0?{}:{width:'180rpx'}]">
					<view class="multiImg" v-if="food.num!=0" 
					@click="multiFood(index)">
						<u-icon name="minus"
						bold
						size="18"
						color="#FFF"
						></u-icon>
					</view>
					<view class="foodNum" v-if="food.num!=0">
				 		{{food.num}}
					</view>
					<view class="addImg" @click="addFood(index)" :style="[food.num==0?{}:{backgroundColor:'#FFF'}]">
						<u-icon name="plus" 
						bold 
						size="18" 
						:color="[food.num==0?'#FFF':'rgb(235,0,41)']"
						></u-icon>
					</view>
				</view>
				<view class="foodImg" :style="[{backgroundImage:'url('+food.image+')'}]">
					
				</view>
				<view class="foodContent">
					<view class="name">
						{{food.name}}
					</view>
					<view class="type">
						{{food.description}}
					</view>
					<view class="priceContainer">
						￥<text class="price">{{food.price}}</text>起
					</view>
				</view>
			</view>
		</view>
		<view class="checkFood" :style="[buyNum==0?{}:{backgroundColor:'rgb(228,0,48)'}]">
			<view class="buyIcon" @click="changeShow" :style="[buyNum==0?{}:{filter: 'grayscale(0%)'}]">
				<view class="buyNum" v-if="buyNum!=0">
					{{buyNum}}
				</view>
			</view>
			<view class="content" v-if="buyNum==0">
				未选购商品
			</view>
			<view class="price" v-if="buyNum!=0">
				￥{{allPrice}}
			</view>
			<view class="goOrder" v-if="buyNum!=0" @click="goOrder">
				<view class="title">
					选好了
				</view>
				<view class="englishTitle">
					Order
				</view>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false" zIndex="80">
			<view class="popupContainer">
				<u-popup :show="show" :round="10" 
				mode="bottom" @close="close" 
				zIndex="90" :overlay="false">
					<view class="allContainer">
						<view class="titleContainer">
							<view class="title">
								购物车
							</view>
							<view class="operate" @click="delAll">
								<div class="delIcon">
									<u-icon name="trash" color="#999999"></u-icon>
								</div>
								清空购物车
							</view>
						</view>
						<view class="cartContainer">
							<view class="cartFood" v-for="(food,index) in cartFoods" :key="index">
								<view class="foodImg">
									
								</view>
								<view class="foodInfo">
									<view class="name">
										{{food.name}}
									</view>
									<view class="priceContainer">
										￥<view class="price">
											{{food.amount}}
										</view>
									</view>
								</view>
								<view class="changeNum">
									<view class="sub" @click="changeSub(index)">
										<u-icon name="minus" color="rgb(228,0,48)" size="20" bold></u-icon>
									</view>
									<view class="num">
										{{food.number}}
									</view>
									<view class="add" @click="changeAdd(index)">
										<u-icon name="plus" color="#FFF" size="20" bold></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</u-overlay>
		<u-popup :show="confirmDel" @close="delClose" :round="10" mode="center">
			<view class="confirmContent">
				<view class="title">
					您确定要清空购物车吗？
				</view>
				<view class="operate">
					<view class="cancelBtn" @click="cancelDel">取消</view>
					<view @click="confirmDelete()" class="confirmBtn"
					>确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buyNum:0,
				allPrice:0,
				cartFoods:[],
				searchName:'',
				dishFoods:[],
				setmealFoods:[],
				confirmDel:false,
				show:false
			}
		},
		methods: {
			delClose(){
				this.confirmDel=false
			},
			cancelDel(){
				this.confirmDel=false
			},
			delAll(){
				this.confirmDel=true
			},
			confirmDelete(){
				uni.request({
					url:'http://localhost:8080/kfc/user/shoppingCart/clean',
					method:'delete',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						this.buyNum=0;
						for(let i=0;i<this.dishFoods.length;i++){
							this.dishFoods[i].num=0
						}
						for(let j=0;j<this.setmealFoods.length;j++){
							this.setmealFoods[j].num=0
						}
						this.confirmDel=false
						this.show=false
						this.allPrice=0
						this.$forceUpdate()
					}
				})
			},
			async changeShow(){
				if(this.buyNum!=0){
					await uni.request({
						url:'http://localhost:8080/kfc/user/shoppingCart/list',
						method:'get',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车信息',res.data.data)
							this.cartFoods=res.data.data
						}
					})
					this.show=true
				}
			},
			changeSub(index){
				if(this.cartFoods[index].dish_id){
					uni.request({
						url:`http://localhost:8080/kfc/user/shoppingCart/sub?dishId=${this.cartFoods[index].dish_id}`,
						method:'post',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车减少菜品',res.data)
						}
					})
				}
				else if(this.cartFoods[index].setmeal_id){
					uni.request({
						url:`http://localhost:8080/kfc/user/shoppingCart/sub?setmealId=${this.cartFoods[index].setmeal_id}`,
						method:'post',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车减少套餐',res.data)
						}
					})
				}
				for(let i=0;i<this.dishFoods.length;i++){
					if(this.dishFoods[i].name==this.cartFoods[index].name){
						this.dishFoods[i].num--
					}
				}
				for(let i=0;i<this.setmealFoods.length;i++){
					if(this.setmealFoods[i].name==this.cartFoods[index].name){
						this.setmealFoods[i].num--
					}
				}
				this.buyNum--
				this.allPrice-=this.cartFoods[index].amount
				this.cartFoods[index].number--
				if(this.cartFoods[index].number==0){
					this.cartFoods.splice(index,1)
					if(this.cartFoods.length==0){
						this.show=false
					}
				}
				this.$forceUpdate()
			},
			changeAdd(index){
				if(this.cartFoods[index].dish_id){
					uni.request({
						url:`http://localhost:8080/kfc/user/shoppingCart/add?dishId=${this.cartFoods[index].dish_id}`,
						method:'post',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车增加菜品',res.data)
						}
					})
				}
				else if(this.cartFoods[index].setmeal_id){
					uni.request({
						url:`http://localhost:8080/kfc/user/shoppingCart/add?setmealId=${this.cartFoods[index].setmeal_id}`,
						method:'post',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车增加套餐',res.data)
						}
					})
				}
				for(let i=0;i<this.dishFoods.length;i++){
					if(this.dishFoods[i].name==this.cartFoods[index].name){
						this.dishFoods[i].num++
					}
				}
				for(let i=0;i<this.setmealFoods.length;i++){
					if(this.setmealFoods[i].name==this.cartFoods[index].name){
						this.setmealFoods[i].num++
					}
				}
				this.buyNum++
				this.allPrice+=this.cartFoods[index].amount
				this.cartFoods[index].number++
				this.$forceUpdate()
			},
			goBack(){
				uni.navigateBack()
			},
			goOrder(){
				uni.navigateTo({
					url:'./confirmOrder'
				})
			},
			goSelect(id){
				uni.navigateTo({
					url:`./selectStandard?id=${id}`
				})
			},
			multiFood(index){
				this.allPrice-=this.dishFoods[index].price
				this.buyNum--
				this.dishFoods[index].num--
				uni.request({
					url:`http://localhost:8080/kfc/user/shoppingCart/sub?dishId=${this.dishFoods[index].id}`,
					method:'post',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						console.log('减少菜品',res.data)
					}
				})
				this.$forceUpdate()
			},
			addFood(index){
				this.allPrice+=this.dishFoods[index].price
				this.buyNum++
				this.dishFoods[index].num++
				uni.request({
					url:`http://localhost:8080/kfc/user/shoppingCart/add?dishId=${this.dishFoods[index].id}`,
					method:'post',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						console.log('增加菜品',res.data)
					}
				})
				this.$forceUpdate()
			},
			searchFoods(){
				uni.request({
					url:`http://localhost:8080/kfc/user/dish/find?name=${this.searchName}`,
					method:'get',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						console.log('查询结果',res.data.data)
						this.dishFoods=res.data.data.dishList
						for(let i=0;i<this.dishFoods.length;i++){
							this.dishFoods[i].num=0
						}
						this.setmealFoods=res.data.data.setmealList
						for(let j=0;j<this.setmealFoods.length;j++){
							this.setmealFoods[j].num=0
						}
						for(let i=0;i<this.dishFoods.length;i++){
							for(let j=0;j<this.cartFoods.length;j++){
								if(this.dishFoods[i].name==this.cartFoods[j].name){
									this.dishFoods[i].num=this.cartFoods[j].number
								}
							}
						}
						for(let i=0;i<this.setmealFoods.length;i++){
							for(let j=0;j<this.cartFoods.length;j++){
								if(this.setmealFoods[i].name==this.cartFoods[j].name){
									this.setmealFoods[i].num=this.cartFoods[j].number
								}
							}
						}
						this.$forceUpdate()
					}
				})
			}
		},
		mounted(){
			uni.request({
				url:'http://localhost:8080/kfc/user/shoppingCart/list',
				method:'get',
				header:{
					token:uni.getStorageSync('STATE_KEY').token
				},
				success:(res)=>{
					console.log('购物车信息',res.data.data)
					this.cartFoods=res.data.data
					for(let i=0;i<this.cartFoods.length;i++){
						this.allPrice+=(this.cartFoods[i].amount*this.cartFoods[i].number)
						this.buyNum+=this.cartFoods[i].number
					}
				}
			})
		}
	}
</script>

<style>
	page{
		background-color: rgb(245,245,245);
	}
</style>

<style lang="scss" scoped>
	.searchContainer{
		.navBarContainer{
			width: 100vw;
			height: 200rpx;
			position: fixed;
			z-index: 99;
			// top:100rpx;
			left: 0;
			background-color: rgb(255,255,255);
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FFF;
			// margin-top: 30rpx;
			.navBar{
				width: 90%;
				margin: 0 auto;
				background-color: #FFF;
				display: flex;
				align-items: center;
				margin-top: 100rpx;
				.back{
					width: 70rpx;
				}
				.searchButton{
					margin-left: 10rpx;
					font-size: 28rpx;
					color:#FFF;
					background-color: rgb(228,0,48);
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;
					width: 100rpx;
				}
			}
		}
		.foodContainer{
			width: 710rpx;
			margin: 0 auto;
			padding-top: 250rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.setmealFood,.dishFood{
				position: relative;
				display: flex;
				justify-content: space-between;
				width: 95%;
				margin: 0 auto;
				margin-bottom: 20rpx;
				background-color: #FFF;
				box-shadow: 5rpx 5rpx 5rpx rgba(205, 205, 205,0.5);
				.select{
					position: absolute;
					width: 120rpx;
					height: 60rpx;
					color: #FFF;
					background-color: rgb(235,0,41);
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					bottom:0;
					right: 20rpx;
					font-size: 24rpx;
					.numWarning{
						width:30rpx;
						height: 30rpx;
						background-color: rgb(35,30,31);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color:#FFF;
						font-weight: bold;
						font-size: 20rpx;
						position: absolute;
						right:-10rpx;
						bottom:45rpx;
					}
				}
				>.add{
					position: absolute;
					bottom:0;
					right: 20rpx;
					background-color: rgb(235,0,41);
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					width: 70rpx;
					height: 60rpx;
					transition: all 0.3s;
					.multiImg{
						transition: all 0.3s;
						width: 45rpx;
						height: 45rpx;
						border-radius: 10rpx;
						background-color: rgb(235,0,41);
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.foodNum{
						color:#FFF;
						font-size: 26rpx;
					}
					.addImg{
						transition: all 0.3s;
						width: 45rpx;
						height: 45rpx;
						border-radius: 10rpx;
						background-color: rgb(235,0,41);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.foodImg{
					width: 300rpx;
					height: 220rpx;
					// background-color: aliceblue;
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					margin-left: 10rpx;
				}
				.foodContent{
					margin-top: 20rpx;
					margin-right: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.name{
						font-size: 30rpx;
					}
					.type{
						margin-top: 10rpx;
						font-size: 26rpx;
					}
					.priceContainer{
						margin-top: 10rpx;
						color:rgb(235,0,41);
						font-weight: bold;
						font-size: 24rpx;
						.price{
							font-size: 32rpx;
						}
					}
				}
			}
		}
		.checkFood{
			width: 720rpx;
			position: fixed;
			z-index: 99;
			bottom: 50rpx;
			left: 15rpx;
			display: flex;
			align-items: center;
			background-color: rgb(161,161,161);
			border-radius: 15rpx;
			transition: all 0.3s;
			.buyIcon{
				// background-color: aliceblue;s
				background-image: url(../../static/orderMeal/buyCart.png);
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
				filter: grayscale(50%);
				transition: all 0.5s;
				width: 60rpx;
				height: 80rpx;
				margin-left: 20rpx;
				margin-top: 12rpx;
				margin-bottom: 12rpx;
				position: relative;
				.buyNum{
					right:-13rpx;
					top:-8rpx;
					position: absolute;
					width:40rpx;
					height: 40rpx;
					background-color: rgb(35,30,31);
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color:#FFF;
					font-weight: bold;
					font-size: 22rpx;
				}
			}
			.content{
				color:#FFF;
				margin-left: 20rpx;
				font-size: 30rpx;
			}
			.price{
				color:#FFF;
				margin-left: 20rpx;
				font-size: 40rpx;
				font-weight: bold;
			}
			.goOrder{
				position: absolute;
				right:20rpx;
				color:#FFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				.title{
					font-size: 36rpx;
				}
				.rnglishTitle{
					font-size: 30rpx;
				}
			}
		}
	}
	.popupContainer{
		background-color: #FFF;
		// z-index: 90;
		.allContainer{
			padding-bottom: 150rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.titleContainer{
				width: 710rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					font-size: 34rpx;
				}
				.operate{
					color:#999999;
					display: flex;
					align-items: center;
					.delIcon{
						margin-left: 6rpx;
					}
				}
			}
			.cartContainer{
				margin-top: 30rpx;
				width: 710rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.cartFood{
					width: 710rpx;
					display: flex;
					position: relative;
					margin-bottom: 30rpx;
					.foodImg{
						background-color: aliceblue;
						width: 150rpx;
						height: 100rpx;
					}
					.foodInfo{
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						.name{
							font-size: 32rpx;
						}
						.priceContainer{
							margin-top: 20rpx;
							font-size: 24rpx;
							color:rgb(228,2,50);
							font-weight: bold;
							display: flex;
							align-items: flex-end;
							.price{
								font-size: 36rpx;
								line-height: 36rpx;
							}
						}
					}
					.changeNum{
						display: flex;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						.sub,.add{
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 1px solid rgb(228,0,48);
						}
						.add{
							background-color: rgb(228,0,48);
						}
						.num{
							margin-left: 20rpx;
							margin-right: 20rpx;
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
	.confirmContent{
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			margin-top: 40rpx;
			font-size: 36rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}
		.operate{
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			>view{
				width: 120rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}
			.cancelBtn{
				border: 1px solid #999999;
			}
			.confirmBtn{
				border:1px solid rgb(228,0,48);
				background-color: rgb(228,0,48);
				color:#FFF;
				margin-left: 30rpx;
			}
		}
	}
</style>
